<template>
  <div class="addOrEdit-wrapper">
    <div class="top d-flex-sb">
      <div class="title">评价管理</div>
    </div>
    <div class="content">
      <el-table :data="list" style="width: 100%" border :height="height">
        <el-table-column label="用户" width="250">
          <template slot-scope="scope">
            <div class="d-flex-sb">
              <el-image style="width: 100px; height: 100px" :src="scope.row.user_headimg" />
              <div>
                <p>{{ scope.row.user_nickname }}</p>
                <p>{{ scope.row.phone }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chapter_title" label="章节名称" width="150" />

        <el-table-column label="评论内容" width>
          <template slot-scope="scope">
            <p style="margin: 0">{{ scope.row.content }}</p>
            <el-popover
              placement="bottom"
              title="评论内容："
              width="200"
              trigger="click"
            >
              <el-row>
                <template v-for="item of scope.row.data.slice(0, 3)">
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">{{ item.content }}</div>
                  </el-col>
                </template>
              </el-row>
              <el-button slot="reference" style="background: none;border: none;color:#409EFF;">查看3条回复</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="评论时间" width />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="blue" @click="replay(scope.row.id)">回复</span>
            <span class="red" @click="changeStatus(scope.row)">{{ scope.row.is_hide ? '隐藏' : '显示' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog ref="dialog" title="回复评论内容" @closeDialog="comfirm">
      <template>
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
          <el-form-item label="评论：" prop="content">
            <el-input v-model="ruleForm.content" type="textarea" />
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
    <Pagination class="pagination" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Dialog from '@/common/dialog'
import Pagination from '@/common/pagination'
import { getChapterCommentList, sendMessage, setMessageHide } from '@/api/request/chapter'
const ERR_OK = 200
export default {
  components: {
    Dialog,
    Pagination
  },
  data() {
    return {
      height: 0,
      total: 0,
      currentPage: 1,
      list: [],
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        id: '',
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入评论内容', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resetHeight()
    })
  },
  created() {
    this._getChapterCommentList(this.currentPage)
  },
  methods: {
    changeStatus(item) {
      switch (item.is_hide) {
        case 0:
          item.is_hide = 1
          this._setMessageHide({ id: item.id, is_hide: item.is_hide })
          break
        case 1:
          item.is_hide = 0
          this._setMessageHide({ id: item.id, is_hide: item.is_hide })
          break
      }
    },
    comfirm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          sendMessage(this.ruleForm)
            .then((res) => {
              this.$message({
                message: res.message,
                showClose: true,
                type: 'success'
              })
              this.ruleForm.content = ''
            })
        }
      })
    },
    handleNextPage(page) {
      this.currentPage = page
    },
    replay(id) {
      this.ruleForm.id = id
      this.$refs.dialog.show()
    },
    hidden() {},
    resetHeight() {
      this.height = document.body.clientHeight - 340
      window.onresize = () => {
        this.height = document.body.clientHeight - 340
      }
    },
    _getChapterCommentList(page) {
      getChapterCommentList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.total
            this.list = res.list
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setMessageHide({ id, is_hide }) {
      setMessageHide({ id, is_hide })
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.addOrEdit-wrapper {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  .top {
    height: 80px;
    .title {
      line-height: 44px;
      color: rgba(68, 68, 68, 1);
      font-size: 18px;
      font-family: Roboto;
      font-weight: bold;
    }
  }
  .content {
    margin-top: 30px;
  }
  .d-flex-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .blue {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .red {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
    width: 60px;
  }
}
.el-200 {
  width: 350px;
}
.el-form-item /deep/ .el-textarea__inner{
  min-height: 100px !important;
}
</style>

